<template>
	<svg>
	<g 	:transform="computedTransform"
			class="cursor-pointer">
		<rect x="140" y="120" width="40" height="40" fill="transparent"  v-if="ft_path"/>
		<!-- 右上2 电流互感器-->
		<g>
			<line x1="130" y1="140" x2="142" y2="140" :style="{ stroke: color, strokeWidth: sWidth }"/>
			<g>
				<circle cx="150" cy="140" r="8" :style="{ stroke: color, strokeWidth: sWidth,fill:'none' }"/>
				<line x1="144" y1="140" x2="150" y2="140" :style="{ stroke: color, strokeWidth: sWidth }"/>
				<line x1="150" y1="140" x2="153" y2="135" :style="{ stroke: color, strokeWidth: sWidth }"/>
				<line x1="150" y1="140" x2="153" y2="145" :style="{ stroke: color, strokeWidth: sWidth }"/>

				<g transform="rotate(-10,150,140)">
					<line x1="150" y1="140" x2="150" y2="126" :style="{ stroke: color, strokeWidth: sWidth }"/>
					<line x1="147" y1="128" x2="153" y2="128" :style="{ stroke: color, strokeWidth: sWidth }"/>
					<line x1="148" y1="126" x2="152" y2="126" :style="{ stroke: color, strokeWidth: sWidth }"/>
				</g>
			</g>
			<g transform="translate(20, 0)">
				<circle cx="150" cy="140" r="8" :style="{ stroke: color, strokeWidth: sWidth,fill:'none' }"/>
				<line x1="144" y1="140" x2="150" y2="140" :style="{ stroke: color, strokeWidth: sWidth }"/>
				<line x1="150" y1="140" x2="153" y2="135" :style="{ stroke: color, strokeWidth: sWidth }"/>
				<line x1="150" y1="140" x2="153" y2="145" :style="{ stroke: color, strokeWidth: sWidth }"/>
			</g>
			<g transform="translate(10, 10)">
				<circle cx="150" cy="140" r="8" :style="{ stroke: color, strokeWidth: sWidth,fill:'none' }"/>
				<line x1="144" y1="140" x2="150" y2="140" :style="{ stroke: color, strokeWidth: sWidth }"/>
				<line x1="150" y1="140" x2="153" y2="135" :style="{ stroke: color, strokeWidth: sWidth }"/>
				<line x1="150" y1="140" x2="153" y2="145" :style="{ stroke: color, strokeWidth: sWidth }"/>
			</g>
			<g transform="translate(10, -10)">
				<circle cx="150" cy="140" r="8" :style="{ stroke: color, strokeWidth: sWidth,fill:'none' }"/>
				<line x1="146" y1="143" x2="154" y2="143" :style="{ stroke: color, strokeWidth: sWidth }"/>
				<line x1="146" y1="143" x2="148" y2="137" :style="{ stroke: color, strokeWidth: sWidth }"/>
				<line x1="154" y1="143" x2="152" y2="137" :style="{ stroke: color, strokeWidth: sWidth }"/>
			</g>
		</g>
	</g>
	</svg>
</template>

<script >

import router from "@/router";

export default {
	name: 'dianLiuHuGanQi',
	components: {
	},
	data() {
		return {

		}
	},
	created() {
	},
	methods: {
		jumpMx(e){
			if (this.ft_path===undefined){
				return
			}
			router.push({
				path: `/${this.ft_path}`,
				query: { name: this.ft_name}
			})
		},
		itemRightClick(event,stateDesc,isMainPage,name,type) {
			event.preventDefault(); // 阻止默认的右键菜单弹出
			// 显示自定义右键菜单
			const {clientX, clientY} = event
			let params = {
				clientX,
				type,
				clientY,
				stateDesc,
				isMainPage,
				deviceName:name,
			}

			this.$emit('itemRightClick', params)
		},
	},
	props: {
		ft_name:undefined,
		ft_path:undefined,
		translateX: { type: Number, default: 0 },
		translateY: { type: Number, default: 0 },
		rotate: { type: Number, default: 0 },
		scale: { type: Number, default: 1 },
		name: { type: String, default: '' },
		color: { type: String, default: '#619fd2' },
		sWidth:{
			type: Number, default: 1
		},
		jg_name:{
			type:String,
			default:''
		},
		brandInfo:{
			type: String,
			default: ""
		},
		data_id:{
			type: String,
			default: ''
		},
		stateDesc:{
			type: String,
			default: ""
		},
		isMainPage:{
			type: Boolean,
		}
	},
	computed: {
		computedTransform() {
			return `
                translate(${this.translateX}, ${this.translateY})
                rotate(${this.rotate})
                scale(${this.scale})
            `;
		},
	},
}

</script>

<style lang="less">
.cursor-pointer {
	cursor: pointer;
}
</style>
